<div class="menu-container">
  <div class="tree-wrap">
    <nz-card>
      <nz-input-group [nzPrefix]="suffixIcon">
        <input type="text" nz-input placeholder="菜单名称" [(ngModel)]="searchValue" />
      </nz-input-group>
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
      <nz-tree [nzData]="dataSource" [nzSearchValue]="searchValue" [nzTreeTemplate]="treeNode" (nzClick)="checkDetail($event)" (nzSearchValueChange)="filterTree(searchValue)">
      </nz-tree>
      <ng-template #treeNode let-node>
        <div class="custom-node" [class.active]="activedNode?.key === node.key">
          <span class="span-node">{{node.title}}</span>
          <div class="tree-btns">
            <a color="primary" *ngIf="node.origin?.id != 0" (click)="editNode(node.origin,$event)">修改</a>
            <a color="primary" *ngIf="node.level <= 3" (click)="addNode(node.origin,$event)">下级菜单</a>
            <a color="primary" *ngIf="node.origin?.id != 0 && !node.isExpanded"
              (click)="deleteNode(node.origin,$event)">删除</a>
          </div>
        </div>
      </ng-template>
    </nz-card>
  </div>
  <div class="form-wrap">
    <nz-card nzTitle="菜单详情">
      <form nz-form [formGroup]="form">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">菜单名称</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="name" type="text" placeholder="菜单名称">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">父级菜单</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select formControlName="parentId" nzPlaceHolder="父级菜单">
              <nz-option *ngFor="let path of menuPathList" [nzValue]="path.id" [nzLabel]="path.namePath"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">路由</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="href" type="text" placeholder="路由">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">图标</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="icon" type="text" placeholder="图标">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24">排序</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="sort" type="number" placeholder="排序">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzOffset]="6" [nzSpan]="12">
            <label nz-checkbox formControlName="isIconMenu">设为顶部图标菜单</label>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzOffset]="6" [nzSpan]="12">
            <button nz-button [disabled]="form.disabled" (click)="resetForm()">重置</button>
            <button nz-button nzType="primary" [disabled]="!form.valid" (click)="submitForm(form)">提交</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-card>
  </div>
</div>
